doctype html
html(lang='en', data-framework='javascript')
  head
    meta(charset='utf-8')
    title NodeJsBuy
    link(rel='stylesheet', href='app.css')
  body
    .App
      header.App__header
        .App__view-cart-wrapper
          button.App__view-cart#view-cart-button Cart
        .App__title
          h1=`${shop.name}: Node Example`
          h2=shop.description

      .Product-wrapper
        each product in products
          .Product
            img(src=product.images[0].src)
            h5.Product__title=product.title
            span.Product__price=`$ ${product.variants[0].price}`
            form(method='post' action='/add_line_item/' + product.id)
              each option in product.options
                label=option.name
                select.Product__option(name=option.name)
                  each value in option.values
                    option(value=value.valueOf())
                      =value
              label Quantity
              input.Product__quantity(min='1', type='number', name='quantity', value='1')
              input(type='hidden' name='checkoutId' value=cart.id)
              button.Product__buy.button#add-to-cart-button(type='submit')
                  | Add to cart

      .Cart#cart(class={'Cart--open': isCartOpen})
        header.Cart__header
          h2 Cart
          button.Cart__close#close-cart-button ×
        ul.Cart__line-items
          each item in cart.lineItems
            li.Line-item
              .Line-item__img
                img(src=item.variant.image.src)
              .Line-item__content
                .Line-item__content-row
                  .Line-item__variant-title=item.variant.title
                  span.Line-item__title=item.title
                .Line-item__content-row
                  .Line-item__quantity-container
                    form.Line-item__quantity-update-form(method='post' action='/decrement_line_item/' + item.id)
                      input(type='hidden' name='checkoutId' value=cart.id)
                      input(type='hidden' name='currentQuantity' value=item.quantity)
                      button.Line-item__quantity-update(type='submit') -
                    span.Line-item__quantity=item.quantity
                    form.Line-item__quantity-update-form(method='post' action='/increment_line_item/' + item.id)
                      input(type='hidden' name='checkoutId' value=cart.id)
                      input(type='hidden' name='currentQuantity' value=item.quantity)
                      button.Line-item__quantity-update(type='submit') +
                  span.Line-item__price=`$ ${(item.variant.price * item.quantity).toFixed(2)}`
                  form(method='post' action='/remove_line_item/' + item.id)
                    input(type='hidden' name='checkoutId' value=cart.id)
                    button.Line-item__remove(type='submit') ×
        footer.Cart__footer
          .Cart-info.clearfix
            .Cart-info__total.Cart-info__small Subtotal
            .Cart-info__pricing
              span.pricing=`$ ${cart.subtotalPrice}`
          .Cart-info.clearfix
            .Cart-info__total.Cart-info__small Taxes
            .Cart-info__pricing
              span.pricing=`$ ${cart.totalTax}`
          .Cart-info.clearfix
            .Cart-info__total.Cart-info__small Total
            .Cart-info__pricing
              span.pricing=`$ ${cart.totalPrice}`
          button.Cart__checkout.button#checkout-button(type='submit', disabled=!cart.lineItems.length) Checkout

    script.
      function isCartOpen() {
        return document.getElementById('cart').className.match(/(?:^|\s)Cart--open(?!\S)/);
      }
      function closeCart() {
        document.getElementById('cart').className = document.getElementById('cart').className.replace(/(?:^|\s)Cart--open(?!\S)/g, '');
      }

      function openCart() {
        if (!isCartOpen()) {
          document.getElementById('cart').className += ' Cart--open';
        }
      }

      if (document.getElementById('quantity')) {
        document.getElementById('quantity').onchange = function() {
          this.form.submit();
        };
      }

      document.getElementById('checkout-button').onclick = function () {
        window.open('#{cart.webUrl}');
      };

      document.getElementById('add-to-cart-button').onclick = openCart;

      document.getElementById('view-cart-button').onclick = openCart;

      document.getElementById('close-cart-button').onclick = closeCart;
